<template>
  <div>
    <template v-if="state.open == 'zero'">
      <span>{{ state.zero }}</span>
    </template>
    <template v-if="state.open == 'pos'">
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="state.content"
        placement="top"
      >
        <span :class="`value-style-${state.type}`">
          {{ state.growthRate }}%
          {{ "&nbsp" }}
          <i
            :class="`fa fa-long-arrow-${
              state.type == 'red' ? 'up' : 'down'
            } arrowColorR threshold-value-${
              state.type == 'red' ? 'positive' : 'negative'
            }`"
          ></i>
        </span>
      </el-tooltip>
    </template>
    <template v-if="state.open == 'other'">
      <wg-threshold-value
        v-model="state.growthRate"
        suffix="%"
      ></wg-threshold-value>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, watch, getCurrentInstance, nextTick } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

const props = defineProps({
  period: Number,
  growthRate: Number,
  acc: Number,
});

const { proxy } = getCurrentInstance() as any;
const state = reactive({
  acc: 0,
  period: 0,
  growthRate: 0,
  type: "",
  open: "",
  zero: "-",
  content: "",
});

const init = (): void => {
  state.period = props.period;
  state.acc = props.acc;
  state.growthRate = props.growthRate;
  render();
};
const render = () => {
  if (
    state.growthRate == 0 ||
    state.growthRate == "-" ||
    state.growthRate == undefined
  ) {
    state.open = "zero";
    if (state.acc < 0) {
      state.zero = "-∞";
    } else if (state.acc > 0) {
      state.zero = "+∞";
    } else {
      state.zero = "-";
    }
  }
  // else if (state.period < 0 && state.growthRate < 0) {
  //   //上年同期值为负数，今年的同比为负数的变黄色底纹，红色字体
  //   state.type = "red";
  //   state.open = "pos";
  //   state.content = "黄底红字反向正增长";
  // } else if (state.acc < 0 && state.growthRate > 0) {
  //   //今年的值为负数，今年的同比为负数的变黄色底纹，绿色字体
  //   state.type = "green";
  //   state.open = "pos";
  //   state.content = "黄底绿字反向负增长";
  // }
  else {
    state.open = "other";
  }
};
onMounted(() => {
  init();
});

watch(
  () => [props.period, props.growthRate],
  () => {
    init();
  }
);
</script>

<style scoped>
.value-style-red {
  background-color: yellow;
  color: #f56c6c;
}

.value-style-green {
  background-color: yellow;
  color: #67c23a;
}

.threshold-value-negative {
  color: #67c23a;
}

.threshold-value-positive {
  color: #f56c6c;
}

.threshold-value-default {
  color: #808080;
}
</style>
